<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>跑马灯</title>

		<style>
			table,
			table tr th,
			table tr td {
				border: 1px solid #0094ff;
			}
			
			table {
				width: 100% min-height: 25px;
				line-height: 25px;
				text-align: center;
				border-collapse: collapse;
			}
		</style>

		<script src="js/vue.js"></script>

	</head>

	<body>
		<div id="app">
			ID :<input type="text" v-model="id" v-focus/> Name:
			<input type="text" v-model="name" @keyup.enter="add" />
			<button @click="add">新增</button>
			<br />
			<br />
			<table>
				<tr>
					<th>Index</th>
					<th> ID</th>
					<th> name</th>
					<th> date</th>
					<th> op</th>
				</tr>
				<tr v-for="(item,index) in list">
					<td>{{ index}}</td>
					<td> {{ item.id }} </td>
					<td> {{ item.name }} </td>
					//多个过滤器
					<td> {{ item.date | dateFormate | other()}} </td>
					<td>
						<a href="#" @click.prevent="del(index)">删除</a>
					</td>
				</tr>

			</table>

		</div>

		<script>
			var padLeft = function(str) {
				str = str + "";
				if(str.length >= 2) return str;
				return "0" + str;
			}
			//全局过滤器；相同名称的过滤器，先查找私有的，如果私有的有，则使用私有；
			Vue.filter("dateFormate", function(data) {
				var y = data.getFullYear()
				var m = data.getMonth() + 1;
				var d = data.getDay();
				var hh = data.getHours()
				var mm = data.getMinutes()
				var ss = data.getSeconds()
				return y + "-" + padLeft(m) + "-" + padLeft(d) + " " + padLeft(hh) + ":" + padLeft(mm) + ":" + padLeft(ss)
			})

			//定义全局的按键修饰符；dom中使用@keyup.f2 进行使用；当f2按键抬起时出发；
			Vue.config.keyCodes.f2 = 113;

			//			Vue.directive('focus', {
			//				// 当被绑定的元素插入到 DOM 中时……
			//				inserted: function(el) {
			//					// 聚焦元素
			//					el.focus()
			//				}
			//
			//			})

			var vm = new Vue({
				el: "#app",
				data: {
					id: "",
					name: "",
					list: [{
						id: 1,
						name: "娃哈哈",
						date: new Date()
					}],
					idInput: null
				},
				methods: {
					add() {
						this.list.push({
							id: this.id,
							name: this.name,
							date: new Date()
						});
						this.id = ""
						this.name = ""
						this.idInput.focus()

					},
					del(index) {
						this.list.splice(index, 1)
						this.idInput.focus()
					}

				},

				//私有过滤器；
				filters: {
					dateFormate(data) {
						var y = data.getFullYear()
						var m = data.getMonth() + 1;
						var d = data.getDay();
						var hh = data.getHours()
						var mm = data.getMinutes()
						var ss = data.getSeconds()
						return y + "-" + padLeft(m) + "-" + padLeft(d) + " " + padLeft(hh) + ":" + padLeft(mm) + ":" + padLeft(ss)
					},

					other(data) {
						return data + "==="
					}
				},
				//私有的指令；
				directives: {
					focus: {
						// 指令的定义
						inserted: (el) => {
							this.idInput = el
							el.focus()
						}
					}
				}

			});
		</script>
	</body>

</html>